@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';

.expandableTreeNode {
  position: relative;
  width: 100%;
}

.expandableContent {
  overflow: hidden;
  display: flex;

  box-sizing: border-box;
  min-height: 0;

  visibility: hidden;

  transition: visibility 200ms;
}

.expandableWrap {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;

  box-sizing: border-box;
  width: 100%;

  transition: grid-template-rows 200ms;

  &[data-expanded='true'] {
    overflow: unset;
    grid-template-rows: 1fr;

    .expandableContent {
      visibility: visible;
    }
  }
}

.expandableNested {
  width: 100%;
  min-width: 0;
}
